<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{system/base/layout}">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>后台管理系统-管理员中心-我的消息</title>
    <!-- 引入bootstrap样式 -->
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <!--图标库-->
    <link th:href="@{/lyear/css/materialdesignicons.min.css}" rel="stylesheet" type="text/css"/>
    <!--    <link th:href="@{/lyear/css/font/iconfont.css}" rel="stylesheet" type="text/css"/>-->
    <link th:href="@{/lyear/css/font2/iconfont.css}" rel="stylesheet" type="text/css"/>
    <!--弹出框样式-->
    <link th:href="@{/lyear/jconfirm/jquery-confirm.min.css}" rel="stylesheet" type="text/css"/>
    <!--自定义样式-->
    <link href="../lyear/css/style.min.css" th:href="@{/lyear/css/style.min.css}" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" th:href="@{/chat/css/chats.css}" type="text/css">

    <script th:src="@{/js2/jquery.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <!--滚动条插件-->
    <script th:src="@{/lyear/js/perfect-scrollbar.min.js}"></script>
    <!--弹出框js-->
    <script th:src="@{/lyear/jconfirm/jquery-confirm.min.js}"></script>
    <!--自定义js脚本-->
    <script th:src="@{/lyear/js/main.min.js}"></script>
    <script th:src="@{/js2/md5.js}"></script>

    <script th:src="@{/chat/layui/layui.all.js}"></script>
    <script th:src="@{/js/jquery_min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/wow.min.js}"></script>
    <script th:src="@{/js/custom.js}"></script>
    <script th:src="@{/plugins/slider-pro/js/jquery.sliderPro.min.js}"></script>
    <script th:src="@{/plugins/owlcarousel/js/owl.carousel.min.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:inline="javascript">
        function showSearch(){
            var showInfo = document.getElementById("showInfo");
            var showSearch = document.getElementById("showSearch");
            showInfo.style.display = "none";
            showSearch.style.display = "block";
        }
        function closeSearch(){
            var showInfo = document.getElementById("showInfo");
            var showSearch = document.getElementById("showSearch");
            showInfo.style.display = "block";
            showSearch.style.display = "none";
        }

    </script>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container" layout:fragment="content">
        <!--页面主要内容-->
<!--        <main class="lyear-layout-content">-->
<!--            <div class="container-fluid">-->
<!--                <div class="row">-->
<!--                    <div class="col-lg-12">-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </main>-->
        <main class="lyear-layout-content">
                <div class="container container-fluid">
                    <div class="row">
                        <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12" style="margin-left:20px">
                            <div class="box" id="chat" style="margin-top: 0px">
                                <!-- 聊天列表 -->
                                <div class="chat-list">
                                    <!-- 顶部个人信息部分 -->
                                    <div class="header" id="showInfo" style="display: block">
                                        <div class="pic2">
                                            <img th:src="@{/images/U_me.jpg}" alt="">
                                        </div>
                                        <span th:text="${fromName}"></span>
                                        <div class="search-friends" onclick="showSearch()"></div>
                                    </div>
                                    <!-- 巨大的搜索框 -->
                                    <div class="search-input" id="showSearch" style="display: none">
                                        <img th:src="@{/images/search.png}" class="search-input-img" alt="">
                                        <input type="text" onmouseleave="closeSearch()">
                                    </div>

                                    <!-- 聊天列表 -->
                                    <div class="friends">
                                        <ul id="friendList" style="padding-left: 0px;">
                                            <li th:each="chatListDTO:${chatListDTOList}"
                                                th:class="${chatListDTO.toName == ''} ? 'current2' : ''">
                                                <div class="friend-pic">
                                                    <span th:if="${chatListDTO.unread != 0}" th:text="${chatListDTO.unread}"></span>
                                                    <a th:href="@{/system/intoMyInformation(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                                        <img th:src="@{/images/U_hr.jpg}" alt="">
                                                    </a>
                                                </div>
                                                <a th:href="@{/system/intoMyInformation(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                                    <i class="name" th:text="${chatListDTO.toName}" style="font-style: normal;"></i>
                                                </a>
                                                <a th:href="@{/system/intoMyInformation(linkId = ${chatListDTO.linkId}, toName=${chatListDTO.toName})}">
                                                    <i class="shortcut" th:text="${chatListDTO.lastMessage}" style="font-style: normal;"></i>
                                                </a>

                                                <div class="time" th:text="${chatListDTO.sendTime}"></div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <!-- 聊天框 -->
                                <div class="chat-content">
                                    <div class="firend-name"></div>
                                    <div class="chat-middle" id="chatContainer"
                                         @scroll='scrollHistory($event)'>
                                        <div class="content" id="ulName">
                                            <div class="chatMsg">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="chat-bottom">
                                <textarea cols="30" rows="10" placeholder="请输入要发送的消息..."
                                          id="messageInput"></textarea>
                                        <button class="chat-send" id="sendId" >发送</button>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </main>
    </div>
</div>

</body>
</html>